<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive table example</title>
  <style>
    table {
      border-collapse: collapse;
    }

    th, td {
      border: 1px solid black;
      padding: 0.3em 0.5em;
    }


    table {
      width: 100%;
    }

    @media (max-width: 30em) {
      table, thead, tbody, tr, th, td {
        display: block;
      }

      thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
      }

      tr {
        margin-bottom: 1em;
      }
    }
  </style>
</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Country</th>
        <th>Region/Farm</th>
        <th>Tasting notes</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Nicaragua</td>
        <td>Matagulpa</td>
        <td>Dark chocolate, almond</td>
        <td>$13.95</td>
      </tr>
      <tr>
        <td>Ethiopia</td>
        <td>Yirgacheffe</td>
        <td>Sweet tea, blueberry</td>
        <td>$15.95</td>
      </tr>
      <tr>
        <td>Ethiopia</td>
        <td>Nano Challa</td>
        <td>Tangerine, jasmine</td>
        <td>$14.95</td>
      </tr>
    </tbody>
  </table>

</body>
</html>
